<template>
	<view class="page">
		<hx-navbar title="我的供应" :back="true" :fixed="true" :backgroundColor="[255, 255, 255]">
		
		</hx-navbar>
		<view class="ytx"></view>
		<view class="order-nav flex align-center justify-between">
			<view class="item" :class="{active: state === 0}" @click="tabClick(0)"> 全部供应 </view>
			<view class="item" :class="{active: state === 1}" @click="tabClick(1)"> 已审核 </view>
			<view class="item" :class="{active: state === 3}" @click="tabClick(3)"> 审核中 </view>
			<view class="item" :class="{active: state === 4}" @click="tabClick(4)"> 未通过 </view>
		</view>


		<view class="order-inner">

			<!-- 订单列表 -->
			<view class="inner flex justify-between align-end">
				<view class="flex" style="flex: 1;">
					<view class="">
						<image src="../../static/imgs/wygyimg1.jpg" mode="widthFix"></image>
					</view>
					<view class="inner-text flex flex-direction justify-around">
						<view class="text-df text-bold">
							五叶地锦杯苗
						</view>
						<view class="text-xs">
							2020-10-14 11:05:13 
						</view>
						<view class="text-sm text-bold">
							审核中
						</view>
					</view>
				</view>
				<view class="circulardyd">
					<view class="circular circularouw"></view>
					<view class="circular circulartwo"></view>
					<view class="circular circularthree"></view>
				</view>
			</view>
			<view class="inner flex justify-between align-end">
				<view class="flex" style="flex: 1;">
					<view class="">
						<image src="../../static/imgs/wygyimg2.jpg" mode="widthFix"></image>
					</view>
					<view class="inner-text flex flex-direction justify-around">
						<view class="text-df text-bold">
							非常好看的五叶地锦，价格公道
						</view>
						<view class="text-xs">
							2020-10-14 11:05:13 
						</view>
						<view class="text-sm text-bold flex align-center">
							已通过
							<view class="sqwrh">
								申请上热门
							</view>
						</view>
					</view>
				</view>
				<view class="circulardyd">
					<view class="circular circularouw"></view>
					<view class="circular circulartwo"></view>
					<view class="circular circularthree"></view>
				</view>
			</view>
			<view class="inner flex justify-between align-end">
				<view class="flex" style="flex: 1;">
					<view class="">
						<image src="../../static/imgs/wygyimg3.jpg" mode="widthFix"></image>
					</view>
					<view class="inner-text flex flex-direction justify-around">
						<view class="text-df text-bold">
							非常好看的五叶地锦，价格公道
						</view>
						<view class="text-xs">
							2020-10-14 11:05:13 
						</view>
						<view class="text-sm text-bold flex align-center">
							未通过 <text><text class="text-bold">!</text><text style="color: #999999;font-weight: 400;">(图片中不得出现联系方式)</text></text>
							<!-- <view class="sqwrh">
								申请上热门
							</view> -->
						</view>
					</view>
				</view>
				<view class="circulardyd">
					<view class="circular circularouw"></view>
					<view class="circular circulartwo"></view>
					<view class="circular circularthree"></view>
				</view>
			</view>
			<view class="inner flex justify-between align-end">
				<view class="flex" style="flex: 1;">
					<view class="">
						<image src="../../static/imgs/wygyimg4.jpg" mode="widthFix"></image>
					</view>
					<view class="inner-text flex flex-direction justify-around">
						<view class="text-df text-bold">
							非常好看的五叶地锦，价格公道
						</view>
						<view class="text-xs">
							2020-10-14 11:05:13 
						</view>
						<view class="text-sm text-bold flex align-center">
							已通过
							<!-- <text><text class="text-bold">!</text><text style="color: #999999;font-weight: 400;">(图片中不得出现联系方式)</text></text> -->
							<!-- <view class="sqwrh">
								申请上热门
							</view> -->
						</view>
					</view>
				</view>
				<view class="circulardyd">
					<view class="circular circularouw"></view>
					<view class="circular circulartwo"></view>
					<view class="circular circularthree"></view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
export default {
    data() {
        return {
            state: 0,
            list: []
        }
    },
    onLoad(options) {
        // this.state = options.state-0||this.state
        // this._initData()
    },
    methods: {
        // _initData(is_rest){
        //     if (is_rest === true) {
				    // this.page = 1;
				    // this.total_page = false;
				    // this.list = [];
        //     }
        //     this.$req({
        //         url:'/api/order/lists',
        //         hide_tip_msg:true,
        //         data:{
        //             state:this.state,
        //         }
        //     }).then(({ data }) => {
        //         this.list = this.list.concat(data.list);
        //         this.total_page = data.total_page || 0;
        //         this.page++;
        //     });
        // },
			
			
        //顶部tab点击
        tabClick(index) {
            this.state = index;
            this._initData(true)
        },
    //     handleOpt(mode,index,order){
    //         let that = this
    //         let content = ''
    //         let url_path = ''
    //         let fun = ()=>{
    //             //刷新数据列表
    //             that._initData(true)
    //         }
    //         if(mode=='del'){
    //             content = '确定删除该订单?'
    //             url_path = '/api/order/del'
    //             fun = function(){
    //                 that.list.splice(index,1)
    //             }
    //         }else if(mode=='cancel'){
    //             content = '确定取消该订单?'
    //             url_path = '/api/order/cancel'
				
				
    //         }else if(mode=='receive'){
    //             content = '是否立即收货?'
    //             url_path = '/api/order/receive'
				
    //         }
    //         uni.showModal({
			 //    title: '提示',
			 //    content: content,
			 //    success: function (res) {
			 //        if (res.confirm) {
			            
    //                     //发起请求
    //                     that.$req({
    //                         url:url_path,
    //                         data:{
    //                             id:order.id,
    //                         },
    //                     }).then((v)=>{
    //                         fun()
    //                     })
						
			 //        } else if (res.cancel) {
			 //            console.log('用户点击取消');
			 //        }
			 //    }
    //         });
    //     },


    }
}
</script>

</script>

<style>
	page,
	.page {
		height: 100%;
	}
	.circular{
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
	}
	.circular+.circular{
		margin-top: 5rpx;
	}
	.right .text-gray{color: #999999;}
	.circulardyd{
		width: 4%;
	}
	.circularouw{
		background-color: #4CD4A9;
	}
	.circulartwo{
		background-color: #79DFBF;
	}
	.circularthree{
		background-color: #BBEFDF;
	}
	.order-nav {
		background-color: #FFFFFF;
		height: 80rpx;
		line-height: 79rpx;
		padding: 0rpx 30rpx 0 20rpx;
		margin-bottom: 20rpx;
		position: sticky;
	}
	
	.order-nav .item {
		font-size: 32rpx;
		padding: 0rpx 2rpx;
		position: relative;
	}
	.order-nav .item.active{
		font-weight: bold;
	}
	.order-nav .item.active::after {
		content: '';
		display: block;
		width: 30%;
		border-bottom: 4rpx solid #26C594;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 0;
	}
	
	.order-inner .inner {
		padding: 30rpx 20rpx 40rpx 20rpx;
		background-color: #FFFFFF;
		border-bottom: 2rpx #F1F1F1 solid;
	}
	.order-inner .inner image{
		width: 240rpx;
		height: 130rpx;
	}
	.order-inner .inner .inner-text{
		margin-left: 20rpx;
	}
	.order-inner .inner .text-df{
		overflow: hidden;
		text-overflow:ellipsis; white-space: nowrap;
	}
	.order-inner .inner .text-xs{
		color: #999999;
	}
	.order-inner .inner .text-sm{
		color: #FE522E;
	}
	.sqwrh{
		width: 142rpx;
		height: 44rpx;
		border-radius: 10rpx;
		line-height: 44rpx;
		text-align: center;
		border:  2rpx #26C594 solid;
		font-size: 24rpx;
		color: #26C594;
		margin-left: 20rpx;
		font-weight: 400;
	}
	.ytx{
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}
</style>
